"use client"

import { signOut, useSession } from "next-auth/react"
import Link from "next/link"
import { Button } from "./ui/button"

export function Navbar() {
  const { data: session } = useSession()

  return (
    <nav className="border-b px-4 py-3">
      <div className="mx-auto flex max-w-7xl items-center justify-between">
        <div className="flex items-center space-x-4">
          <Link href="/" className="text-xl font-bold">
            History Shuffle
          </Link>
          {session && (
            <>
              <Link href="/game" className="text-gray-600 hover:text-gray-900">
                开始游戏
              </Link>
              {session.user.isAdmin && (
                <Link href="/admin" className="text-gray-600 hover:text-gray-900">
                  管理后台
                </Link>
              )}
            </>
          )}
        </div>

        <div className="flex items-center space-x-4">
          {session ? (
            <>
              <span className="text-sm text-gray-600">
                {session.user.username}
              </span>
              <Button
                variant="outline"
                onClick={() => signOut({ callbackUrl: "/auth/login" })}
              >
                退出
              </Button>
            </>
          ) : (
            <Link href="/auth/login">
              <Button>登录</Button>
            </Link>
          )}
        </div>
      </div>
    </nav>
  )
} 